<template>
	<view class="content ba_img">
		<view :style="{
        height: statusBarHeight + 'px',
        background: isHeadBack ? 'rgba(39,44,41,1)' : 'rgba(0,0,0,0)',
      }">
		</view>
		<view class="head" :style="{
        top: statusBarHeight + 'px',
        background: isHeadBack ? 'rgba(39,44,41,1)' : 'rgba(0,0,0,0)',
      }">
			<view class="title" @click="toHomePage"> 首页 </view>
			<view class="t_search" @click="toSearch">
				<image src="../../static/images/icon_sy_sousuo.png" mode=""></image>
				<text class="t_placeholder">请输入搜索内容</text>
			</view>
			<view class="t_right">
				<image src="../../static/images/icon_sy_lishijilu.png" mode="" @click="toXueXi"></image>
				<image style="margin-left: 32rpx" src="../../static/images/icon_sy_xiaoxi.png" @click="toMessgae"
					mode=""></image>
			</view>
		</view>

		<u-tabs class="tab_box" :list="list4" lineWidth="0" lineColor="#f56c6c" :current="currentIndex"
			:scrollable="false" :activeStyle="{
        color: '#fff',
        fontWeight: 'bold',
        transform: 'scale(1.05)',
        'font-size': '34rpx',
        backgroundImage: backgroundImage,
        backgroundRepeat: repeat,
        backgroundSize: '20px 20px',
        backgroundPosition: '100% 3px',
        padding: '8rpx 0rpx',
      }" :inactiveStyle="{
        color: '#ADADAD',
        transform: 'scale(1)',
        'font-size': '34rpx',
      }" itemStyle="padding-left: 10px; padding-right: 10px; height: 34px;font-size: 84rpx;" @change="change" :style="{
        width: '100%',
        top: tabTop + 'px',
        background: isHeadBack ? 'rgba(39,44,41,1)' : 'rgba(0,0,0,0)',
        zIndex: 1000,
      }">
		</u-tabs>
		<scroll-view :style="{
        height: scrollHeihgt + 'px',
        paddingTop: tabHeight + 'px',
      }" :scroll-y="true" @scroll="scroll" @scrolltolower="scrolltolower" :scroll-top="top" class="scroll_box">
			<view :style="{
          height: height + 'px',
          width: '100%',
        }">
			</view>

			<!-- 推荐 -->
			<recommend v-if="currentIndex == 10" :data="data" :my_level_id="my_level_id"></recommend>
			<!-- 冰释引 -->
			<home v-if="currentIndex == 0" :hasHead="false" :key="keys" :toNum="0" :zuopinObj="zuopinObj"
				:isShowYe="true" ref="home1" :my_level_id="my_level_id"></home>
			<!-- 家族树 -->
			<wenIsland v-if="currentIndex == 1" :isShow="false" :currentIndex="1" :familyList="familyList"
				:isHome="true" :showAnTitle="true" :my_level_id="my_level_id"></wenIsland>
			<!-- 故土恩 -->
			<lingDD v-if="currentIndex == 2" :list="gutuList" :isGutu="true" :showAnTitle="true"
				:my_level_id="my_level_id"></lingDD>
			<!-- 逍遥游 -->
			<carefree v-if="currentIndex == 3" :xiaoyaoList="xiaoyaoList" :my_level_id="my_level_id"></carefree>
			<!-- 诗心园 -->
			<!-- <wenIsland
        v-if="currentIndex == 5"
        :currentIndex="2"
        :isShow="false"
        :familyList="shixinList"
        :isHomeShi="true"
      ></wenIsland> -->
			<!-- 问道山 -->
			<view :style="{
          color: 'rgb(173, 173, 173)',
          'text-align': 'center',
          padding: '0 30rpx',
          margin: '40rpx 0',
        }" v-if="currentIndex == 4">{{ anTitle }}</view>
			<wendaoShan v-if="currentIndex == 4" :list="qingcheng" title="青城问道" :isIndex="true"></wendaoShan>
			<wendaoShan v-if="currentIndex == 4" :list="shanhai" title="山海连根" :isIndex="true"></wendaoShan>
			<wendaoShan v-if="currentIndex == 4" :list="huofeng" title="起名咨询" :isIndex="true"></wendaoShan>
			<wendaoShan v-if="currentIndex == 4" :list="xinli" title="心理咨询" :isIndex="true"></wendaoShan>
			<view style="height: 50rpx" v-show="currentIndex == 4"></view>
		</scroll-view>

		<!-- <u-transition :show="show" mode="slide-up">
			<view class="play_zhe_box" :style="{
			'height':windowHeight_play+'px'
			}" :safeAreaInsetBottom="false">
				<view class="play_box">

				</view>
			</view>
		</u-transition> -->
		<!-- <u-transition :show="show" mode="slide-up" :duration="3000" @beforeEnter="" @enter="" @afterEnter=""> -->
		<!-- 播放器 -->
		<!-- <view
      class="play_zhe_box"
      v-if="show"
      :style="{
        'padding-top': height + 'px',
      }"
    >
      <view
        class="play_head"
        :style="{
          top: statusBarHeight + 'px',
        }"
      >
        <view class="play_head_left">
          <u-icon
            name="arrow-down"
            color="#eeeeee"
            size="24"
            :bold="true"
            @click="show = false"
          ></u-icon>
        </view>
        <view class="text">图书林</view>
        <view class="play_head_right">
          <image src="@/static/images/slices/icon_zhunfa.png" mode=""></image>
        </view>
      </view>
      <view class="play_cover">
        <image src="@/static/images/pic_hxxq_bofangtu.png" mode=""></image>
      </view>
      <view class="play_text"> 01.这些人，都在努力的活着 </view>
      <view class="play_bar">
        <progressBar :way="1" :isBtn="false"></progressBar>
      </view>
      <view class="play_btn">
        <view class="btn_left">
          <image src="@/static/images/icon_hxxq_shangyige.png" mode=""></image>
        </view>
        <view class="btn_center">
          <image src="@/static/images/icon_hxxq_bofang.png" mode=""></image>
        </view>
        <view class="btn_right">
          <image src="@/static/images/icon_hxxq_xiayige.png" mode=""></image>
        </view>
      </view>
    </view> -->
		<!-- </u-transition> -->
		<!-- <player ref="player" :show="show" @colse="colse"></player> -->
		<floatingBall></floatingBall>
	</view>
</template>

<script>
	import progressBar from "@/pages/components/progress_bar.vue"; //录音
	import recommend from "@/components/recommend.vue"; //推荐
	import wenIsland from "@/components/wenIsland.vue"; //家族树 诗心园
	import lingDD from "@/components/lingDD.vue"; //故土恩
	import home from "@/pages/home/home.vue"; //冰释引  首页
	import carefree from "@/components/carefree.vue"; //逍遥游
	import wendaoShan from "@/components/wendaoShan.vue"; //问道山
	import {
		bofang_list,
		add_log
	} from "@/common/api/play.js"; // 播放
	import {
		mapState,
		mapMutations,
		mapActions
	} from "vuex";
	import {
		Players,
		setDcocument
	} from "@/common/player.js";
	import storage from "@/common/storage"; // 缓存封装
	export default {
		data() {
			return {
				keys: 0,
				statusBarHeight: 0,
				height: 0,
				tabHeight: 0,
				tabTop: 0,
				windowHeight: 0,
				scrollHeihgt: 0,
				list4: [
					// {
					//   name: "推荐",
					// },
					{
						name: "冰释",
					},
					{
						name: "家树",
					},
					{
						name: "故土",
					},
					{
						name: "逍遥",
					},
					// {
					//   name: "诗心园",
					// },
					{
						name: "问道",
					},
				],
				isHeadBack: false,
				currentIndex: 10,
				top: 0,
				show: false,
				windowHeight_play: 0,
				data: {},
				familyList: {},
				xiaoyaoList: {},
				shixinList: {},
				zuopinObj: {},
				huofeng: [],
				qingcheng: [],
				shanhai: [],
				xinli: [],
				gutuList: [],
				backgroundImage: "url(" + require("@/static/images/biaotizhuangshi.png") + ")",
				repeat: "no-repeat",
				last_page: 0,
				page: 1,
				show1: true,
				currentRoute: "",
				anTitle: "",
				my_level_id: 0
			};
		},
		components: {
			recommend,
			home,
			wenIsland,
			lingDD,
			carefree,
			wendaoShan,
			progressBar,
		},
		onLoad(options) {
			if (options.top) {
				this.top = options.top;
			}
		},
		onShow() {
			// console.log('????????????????????????????????????????????进入首页show');
			if (this.$refs.player) {
				this.$refs.player.setIntervalT();
			}
			this.show = false;
			this.show1 = true;
			this.top = this.$scroll.top;
		},
		onHide() {
			this.show = false;
			// if (this.$refs.player.times) {
			// 	clearInterval(this.$refs.player.times);
			// }
			this.show1 = false;
		},
		computed: {
			...mapState(["isPlay"]),
		},
		created() {
			this.getHeight();
			// 首页
			this.gethomePage();
			this.anTitle = storage.get("shanAn").wendaoshan;
		},
		mounted() {
			// console.log("onTabBarMidButtonTap");
			// this.$store.dispatch('activeSetBall',false);
			console.log("触发了啊");
			bofang_list({}).then((res) => {
			  console.log("resssss", res);
			  if (res.status == 200 && res.data.list && res.data.list.length) {
			    this.activeSetBall(true);
			  } else {
			   this.activeSetBall(false);
			  }
			});
			// uni.onTabBarMidButtonTap((res) => {
			//   uni.navigateTo({
			//   	url: "/pages/distinguish/galaxy",
			//   });
			// });
			
		},
		methods: {
			...mapActions({
				activeSetBall: 'activeSetBall'
			}),
			// 获取各种高度
			getHeight() {
				const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度
				this.statusBarHeight = statusBarHeight.statusBarHeight;
				// console.log(this.statusBarHeight, "状态栏高度");
				this.windowHeihgt = statusBarHeight.windowHeight;
				// console.log(this.windowHeihgt, "总高度");
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select(".head").fields({
						size: true,
					});
					query.select(".tab_box").fields({
						size: true,
					});

					query.exec((data) => {
						// console.log(data, "各种高度");
						let sum = 0;
						data.forEach((item) => {
							sum += item.height;
						});
						this.scrollHeihgt = this.windowHeihgt;
						// console.log(data[0].height, "头部高度");
						// console.log(data[1].height, "tab高度");
						// console.log(this.scrollHeihgt, "滚动取高度");
						this.tabTop = data[0].height + this.statusBarHeight;
						this.tabHeight = sum;
						// this.height = sum + 20;
						// console.log(data,'这个是啥')
					});
				});
			},
			toHomePage() {
				this.currentIndex = 10;
			},
			// 首页
			gethomePage() {
				this.$http
					.getPageDetail({})
					.then((res) => {
						let data = res.data.data;
						this.data = data;
						// console.log(res, "首页");
						this.my_level_id = res.data.my_level_id
						// console.log(this.my_level_id,'我的等级')
					})
					.catch((error) => {
						uni.$u.toast(error);
					});
			},
			// 家族树
			getListFamily() {
				this.$http
					.homeGetListFamily({
						page: this.page
					})
					.then((res) => {
						let data = res.data.list;
						// this.familyList = data;
						if (res.data.list.current_page == 1) {
							this.familyList = res.data.list;
						} else {
							this.familyList.data = this.familyList.data.concat(
								res.data.list.data
							);
						}
						this.last_page = res.data.list.last_page;
						// console.log(data, "家族树");
					})
					.catch((error) => {
						uni.$u.toast(error);
					});
			},
			// 逍遥游
			getXiaoyaoyou() {
				// 逍遥游
				this.$http
					.weichuangXiaoyaoyou({
						page: this.page
					})
					.then((res) => {
						let data = res.data.list;
						// this.xiaoyaoList = data;
						this.my_level_id = res.data.my_level_id
						if (res.data.list.current_page == 1) {
							this.xiaoyaoList = res.data.list;
						} else {
							this.xiaoyaoList.data = this.xiaoyaoList.data.concat(
								res.data.list.data
							);
						}
						this.last_page = res.data.list.last_page;
						// console.log(data, "逍遥游");
					})
					.catch((error) => {
						uni.$u.toast(error);
					});
			},
			// 诗心园
			getShixinyuan() {
				this.$http
					.weichuangShixinyuan({
						page: this.page
					})
					.then((res) => {
						let data = res.data.list;
						// this.shixinList = data;
						if (res.data.list.current_page == 1) {
							this.shixinList = res.data.list;
						} else {
							this.shixinList.data = this.shixinList.data.concat(
								res.data.list.data
							);
						}
						this.last_page = res.data.list.last_page;
						// console.log(data, "诗心园");
					})
					.catch((error) => {
						uni.$u.toast(error);
					});
			},
			// 问道山
			getZixunwendao() {
				// 问道山
				this.$http
					.yitianZixunwendao()
					.then((res) => {
						let data = res.data.data;
						this.huofeng = res.data.data.huofeng;
						this.qingcheng = res.data.data.qingcheng;
						this.shanhai = res.data.data.shanhai;
						this.xinli = res.data.data.xinli;
						// console.log(data, "问道山");
					})
					.catch((error) => {
						uni.$u.toast(error);
					});
			},
			getList() {
				// 冰释引-作品
				this.$http
					.userMyzuopin({
						user_id: 1,
						hideLoading: true
					})
					.then((res) => {
						for (let i = 0; i < res.data.list.data.length; i++) {
							res.data.list.data[i].url = "/pages/training/detail";
						}
						this.zuopinObj = {
							kechengList: res.data.list,
							tushuList: res.data.list_tushu,
						};
						// console.log(this.zuopinObj, "冰释引-作品");
					})
					.catch((error) => {
						uni.$u.toast(error);
					});
			},
			// 故土恩列表
			getGutuList() {
				this.$http
					.homeGetList({
						page: this.page
					})
					.then((res) => {
						this.gutuList = this.gutuList.concat(res.data.list.data);
						this.last_page = res.data.list.last_page;
						// console.log(this.gutuList, "故土恩");
					})
					.catch((error) => {
						uni.$u.toast(error);
					});
			},
			toMessgae(e) {
				uni.navigateTo({
					url: "/pages/message/message-center",
				});
			},
			toXueXi() {
				uni.navigateTo({
					url: "/pages/integral/myTraining",
				});
			},
			toSearch(e) {
				uni.navigateTo({
					url: "/pages/search/index",
				});
			},
			change(e) {
				this.page = 1;
				this.last_page = 0;
				this.familyList = {};
				this.gutuList = [];
				this.xiaoyaoList = {};
				this.shixinList = {};
				// console.log("eeeeeee", e);
				// 刷新组件
				if (e.index == 0 && this.keys == 0) {
					this.keys++;
				}
				this.currentIndex = e.index;

				if (e.index == 0) {
					// 冰释引
				} else if (e.index == 1) {
					// 家族树
					this.getListFamily();
				} else if (e.index == 2) {
					// 故土恩
					this.getGutuList();
				} else if (e.index == 3) {
					// 逍遥游
					this.getXiaoyaoyou();
				} else if (e.index == 4) {
					// 问道山
					this.getZixunwendao();
				} else if (e.index == 10) {
					// this.getList();
					// 首页
					this.gethomePage();
				}

				// else if (e.index == 5) {
				//   // 诗心园
				//   this.getShixinyuan();
				// }
			},
			colse() {
				this.show = false;
			},
			scroll(e) {
				if (e.target.scrollTop == 0) {
					this.isHeadBack = false;
				} else {
					this.isHeadBack = true;
				}
			},
			scrolltolower() {
				if (this.page == this.last_page || this.last_page == 0) {
					if (this.currentIndex == 0) {
						// 冰释引
						this.$refs.home1.scrolltolower();
					}
				} else {
					this.page++;
					if (this.currentIndex == 0) {
						// 冰释引
						// this.$refs.home1.scrolltolower();
					} else if (this.currentIndex == 1) {
						// 家族树
						this.getListFamily();
					} else if (this.currentIndex == 2) {
						// 故土恩
						this.getGutuList();
					} else if (this.currentIndex == 3) {
						// 逍遥游
						this.getXiaoyaoyou();
					} else if (this.currentIndex == 4) {
						// 问道山
						// this.getZixunwendao();
					}
					// else if (this.currentIndex == 5) {
					//   // 诗心园
					//   this.getShixinyuan();
					// }
					// else if (this.currentIndex == 0) {
					//   // this.getList();
					// }
				}
				// console.log("触发父组件");
			},
		},
	};
</script>

<style lang="scss" scoped>
	.ba_img {
		margin: 0;
		background: url("/static/images/index.png") no-repeat;
		background-size: 100% 100%;
		background-attachment: fixed;
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		box-sizing: border-box;
	}

	.head {
		width: 100%;
		font-size: 36rpx;
		color: #fff;
		display: flex;
		align-items: center;
		padding: 30rpx;
		font-weight: bold;
		position: fixed;
		left: 0;
		z-index: 99;

		.title {
			font-size: 38rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			color: #eeeeee;
			padding-right: 24rpx;
		}

		.t_search {
			width: 434rpx;
			height: 80rpx;
			background: rgba(39, 44, 41, 0.5);
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			// margin-left: 24rpx;
			display: flex;
			align-items: center;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-left: 32rpx;
			}

			.t_placeholder {
				font-size: 30rpx;
				color: #adadad;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				margin-left: 14rpx;
			}
		}

		.t_right {
			margin-left: 40rpx;
			display: flex;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.tab_box {
		position: fixed;
	}

	.scroll_box {
		box-sizing: border-box;
		// padding-bottom: 20rpx;
	}
</style>